<template>
  <div class="settings-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="内容设置" name="content">
        <el-form label-width="80px" :model="componentProps">
          <el-form-item label="标题文案">
            <el-input v-model="componentProps.text"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="样式设置" name="style">
        <el-form label-width="80px" :model="componentProps">
          <el-form-item label="字体颜色">
            <el-color-picker v-model="componentProps.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number v-model="componentProps.fontSize" :min="12" :max="72"></el-input-number>
          </el-form-item>
          <el-form-item label="对齐方式">
            <el-radio-group v-model="componentProps.textAlign">
              <el-radio-button label="left">居左</el-radio-button>
              <el-radio-button label="center">居中</el-radio-button>
              <el-radio-button label="right">居右</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';

export default {
  name: 'TitleBarSettings',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  data() {
    // Initialize with default values if they don't exist
    const defaultProps = {
      text: '标题栏',
      color: '#333333',
      fontSize: 16,
      textAlign: 'center'
    };
    return {
      activeTab: 'content',
      componentProps: { ...defaultProps, ...this.component.props }
    };
  },
  watch: {
    componentProps: {
      handler(newVal) {
        EventBus.$emit('component-updated', {
          ...this.component,
          props: newVal
        });
      },
      deep: true
    },
    component(newVal) {
      this.componentProps = { ...newVal.props };
    }
  }
};
</script>

<style scoped>
.settings-container {
  padding: 10px;
}
</style>